<template>
  <a-card :bordered="false">
    <a-button
      @click="handleAdd"
      style="position: absolute; z-index: 999; right: 50px"
      type="primary"
      icon="plus"
    >新增
    </a-button
    >
    <a-tabs type="card" default-active-key="1" @change="tabChange" class="tabPage">
      <a-tab-pane key="1" tab="正在直播">
        <div>
          <a-row>
            <a-col
              v-for="(item, index) in dataList"
              :key="index"
              :span="5"
              @click="detailData(item)"
              :style="{ background: 'url(' + item.coverUrl + ') no-repeat', margin: '15px',backgroundSize:'100% 100%'}"
            >
              <div style="width: 100%; height: 130px"></div>
              <div style="margin: 5px; color: #fff; font-size: 16px">{{ item.mainTitle }}</div>
              <div style="display: flex; justify-content: space-between; margin: 15px">
                <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
                <div style="margin-top: 5px">
                  <a-icon style="font-size: 20px; color: #fff" type="heart"/>
                  <span style="font-size: 16px; padding-left: 5px; color: #fff">{{ item.thumbsNum }}</span>
                </div>
              </div>
            </a-col>
          </a-row>
          <div class="nodate" v-if="!dataList">
            <img :src="noDate"/>
          </div>
        </div>
      </a-tab-pane>
<!--      <a-tab-pane key="2" tab="已结束">-->
<!--        <div>-->
<!--          <a-row>-->
<!--            <a-col-->
<!--              v-for="(item, index) in dataList"-->
<!--              :key="index"-->
<!--              :span="5"-->
<!--              @click="endData(item)"-->
<!--              class="live_list"-->
<!--              :style="{ 'background-image': 'url(' + item.coverUrl + ')', margin: '15px' }">-->
<!--              <div style="width: 100%; height: 230px"></div>-->
<!--              <div style="margin: 5px; color: #fff; font-size: 16px">{{ item.mainTitle }}</div>-->
<!--              <div style="display: flex; justify-content: space-between; margin: 15px">-->
<!--                <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>-->
<!--                <div style="margin-top: 5px">-->
<!--                  <a-icon style="font-size: 20px; color: #fff" type="heart"/>-->
<!--                  <span style="font-size: 16px; padding-left: 5px; color: #fff">{{ item.thumbsNum }}</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--          <div class="nodate" v-if="!dataList || dataList.length == 0">-->
<!--            <img :src="noDate"/>-->
<!--          </div>-->
<!--        </div>-->
<!--      </a-tab-pane>-->
    </a-tabs>
    <liveDetailData ref="LiveDetailData"></liveDetailData>
    <liveEndData ref="LiveEndData"></liveEndData>
    <liveInfo-model ref="modalForm" @ok="modalFormOk"></liveInfo-model>
  </a-card>
</template>

<script>
  import LiveDetailData from './modules/LiveDetailData'
  import LiveEndData from './modules/LiveEndData'
  import liveInfoModel from './modules/LiveInfoModal'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction, postAction} from '@/api/manage'

  export default {
    name: 'LiveInfoList',
    mixins: [JeecgListMixin],
    components: {
      LiveDetailData,
      LiveEndData,
      liveInfoModel
    },
    data() {
      return {
        description: '直播信息管理页面',
        // 表头
        disableMixinCreated:true,
        dataList: [],
        noDate: require('@/assets/nodata.png'),
        likesNums: [],
        liveStatus: 0,
        url: {
          list: '/liveManage/liveInfo/queryQueryPlaylistStreamList',
          hisList: '/liveManage/liveInfo/list',
          delete: '/live/liveInfo/delete',
          deleteBatch: '/live/liveInfo/deleteBatch',
          exportXlsUrl: 'live/liveInfo/exportXls',
          importExcelUrl: 'live/liveInfo/importExcel',
          fileUpload: window._CONFIG['domianURL'] + '/sys/common/upload'
        }
      }
    },
    mounted() {
      this.getAllList()
    },
    methods: {
      getAllList() {
        const param = {
          pageNo: 1,
          pageSize: 100
        };
        postAction(this.url.list, param).then((res) => {
          if (res.success) {
            this.dataList = res.result.records
          }
        })
      },
      getHisList() {
        const param = {
          pageNo: 1,
          pageSize: 100
        };
        getAction(this.url.hisList, param).then((res) => {
          if (res.success) {
            this.dataList = res.result.records
          }
        })
      },
      tabChange(key) {
        if (key === '1') {
          this.liveStatus = 0;
          this.getAllList()
        } else {
          this.liveStatus = 2;
          this.getHisList()
        }
      },
      detailData(item) {
        this.$refs.LiveDetailData.detail(item)
      },
      endData(item) {
        this.$refs.LiveEndData.detail(item)
      }
    }
  }
</script>

<style>
  @import '~@assets/less/common.less';

  .live_list {
    background-size: cover;
  }

  .nodate {
    width: 100%;
    height: 60vh;
    background-color: #ffff;
    justify-content: center;
    text-align: center;
  }

  .nodate img {
    width: 30%;
    margin: 0 auto;
  }
</style>
